<template>
  <div class="overview-live-data-box">
    <span class="data_overview_title">数据概况</span>

    <div class="live-data-box">

      <div class="single-data-box">
        <span class="live-data-number" style="color: #8AA5FF;">{{ displayData.channel_count }}</span>
        <span class="live-data-cn">已创建频道数</span>
      </div>

      <div class="single-data-box">
        <span class="live-data-number" style="color: #6EE5FF;">

          {{ getArea(displayData.duration_count).realVal }}

          <span class="live-data-unit">
            {{ getArea(displayData.duration_count).unit }}
          </span>

        </span>
        <span class="live-data-cn">观看时长累计(分钟)</span>
      </div>

      <div class="single-data-box">
        <span class="live-data-number" style="color: #FFA86E;">{{ displayData.file_count }}</span>
        <span class="live-data-cn">视频文件数</span>
      </div>

      <div class="single-data-box">
        <span class="live-data-number" style="color: #D258FF;">{{ displayData.storage_count }}</span>
        <span class="live-data-cn">媒体容量(G)</span>
      </div>

    </div>

    <div class="data_overview_tag" />
  </div>
</template>

<script>
import { getDataOverview } from '@/api/lives'
import { mapGetters } from 'vuex'

export default {
  components: {

  },
  data() {
    return {
      displayData: {
        channel_count: 0,
        duration_count: 0,
        file_count: 0,
        storage_count: 0
      }
    }
  },
  computed: {
    ...mapGetters([
      'isRefresh'
    ])
  },
  watch: {
    'isRefresh'(n, o) {
      this.refreshOverviewData()
    }
  },
  mounted() {
    this.refreshOverviewData()
  },
  methods: {
    getArea(arg) {
      if (arg.toString().length >= 13) {
        // return arg/1000000000000+"万亿"
        const moneys = arg / 1000000000000
        const realVal = parseFloat(moneys).toFixed(2)
        return { realVal, unit: '万亿' }
      } else if (arg.toString().length >= 9) {
        const moneys = arg / 100000000
        const realVal = parseFloat(moneys).toFixed(2)
        return { realVal, unit: '亿' }
      } else if (arg.toString().length >= 4) {
        const moneys = arg / 10000
        const realVal = parseFloat(moneys).toFixed(2)
        return { realVal, unit: '万' }
      }

      return { realVal: '', unit: '' }
    },
    refreshOverviewData() {
      getDataOverview().then((res) => {
        if (res.code === 200) {
          this.displayData.channel_count = res.data.channel_count || 0
          this.displayData.duration_count = res.data.duration_count || 0
          this.displayData.file_count = res.data.file_count || 0
          var storage = res.data.storage_count || 0
          this.displayData.storage_count = Math.round(storage / 1000 / 1000 / 1000)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.live-data-box {
  width: 750px;
  height: 150px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  left: 35px;
  top: 70px;

  .single-data-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
  }

  .live-data-number {
    font-size: 60px;
    font-family: Adobe Heiti Std;
    font-weight: normal;

    .live-data-unit{
      font-size: 30px;
      margin-left: -10px;
    }
  }

  .live-data-cn {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 10;
    color: #6D7A8E;
    margin-top: 10px;
  }
}

// 数据概览
.overview-live-data-box {
  top: 13px;
  left: 260px;
  width: 901px;
  height: 247px;
  background: #FFFFFF;
  position: absolute;
  border-radius: 10px;
}

.data_overview_title {
  top: 31px;
  left: 54px;
  width: 98px;
  height: 23px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #4A5462;
  position: absolute;
}

.data_overview_tag {
  width: 4px;
  height: 28px;
  background: #2E9BEA;
  border-radius: 2px;
  top: 32px;
  position: absolute;
}
</style>
